<template>
  <div class="flex-row-between flex-row-center">
    <div class="flex-row-center">
      <div class=" flex-row-center">
        <div class="api-cache flex-row-center ">
          <Icon class="logo icon icon-large " type="logo" />
          <transition name="anim-scale">
            <div class="cache-doc" v-if="apiDocDbCache">
              <div class="cache-doc-head flex-row-center">
                <Icon class="icon logo" type="logo" />
                <div class="title">上次编辑的文档</div>
              </div>
              <div class="cache-doc-body" :title="apiDocDbCache.name">
                {{ apiDocDbCache.name }}
              </div>
              <div class="cache-doc-footer flex-row-between">
                <!-- <i/> -->
                <div class="time aux flex-row-center">
                  <!-- <Icon class="icon" type="time" /> -->
                  {{ apiDocDbCache.updateTime }}
                </div>
                <div>
                  <span class="btn-link" @click="continueEdit(false)">
                    放弃
                  </span>
                  <span class="btn-link" @click="continueEdit()">继续</span>
                </div>
              </div>
            </div>
          </transition>
        </div>
        <div
          class="doc-name-input flex-row-center click blod"
          @click="setApiDoc()"
        >
          {{ apiDoc && apiDoc.name ? apiDoc.name : "Simple-API" }}
        </div>
      </div>
    </div>

    <div class="dashed margin-left-5px margin-right-5px"></div>

    <span class="flex-row-center">
      <div class="cache-list">
        <div class="search flex-row-center">
          <!-- <Icon
            @click="addApiDoc()"
            class="icon click"
            type="add"
            title="新建接口文档"
          /> -->
          <div class="input">
            <input
              placeholder="查找本地文档"
              maxlength="50"
              v-model="query.keyword"
              @focus="getApiDocList"
            />
          </div>
          <Icon class="icon click" type="search" @click="search" />
        </div>
        <div class="doc-list-view" v-if="visibleDocList">
          <div class="doc-list">
            <div
              class="doc-item click flex-row-center"
              :class="apiDoc && doc.name === apiDoc.name && 'item-selected'"
              v-for="(doc, i) in apiDocList"
              :key="i"
              :value="doc.name"
              @click="setApiDoc(doc)"
            >
              <Icon
                class="icon icon-small logo margin-right-10px"
                type="logo"
              />
              <div class="text-nowrap">{{ doc.name || "未命名" }}</div>
            </div>
            <div
              class="aux text-center"
              v-if="!apiDocList || !apiDocList.length"
            >
              没有本地文档
            </div>
          </div>
          <!-- <div class="cache-list-footer">
            <span class="btn aux click" @click="visibleDocList = false"
              >关闭</span
            >
          </div> -->
        </div>
      </div>
      <slot name="action">
        <!-- <button class="btn" @click="visibleApiImport = true">
          <Icon type="download" />导入
        </button>
        <button class="btn" @click="visibleApiExport = true">
          <Icon type="upload" />导出
        </button> -->
      </slot>
    </span>
  </div>
</template>
<script>
export default {
  props: ["apiDoc"],
  data: function() {
    return {
      dbStaus: false,
      apiDocDbCache: null,
      apiDocList: [],
      visibleDocList: false,
      query: {
        keyword: "",
      },
    };
  },
  computed: {},
  mounted() {
    this.getApiDocCache();
    // this.getApiDocList("hidden");
    window.addEventListener("click", this.domOnClick);
  },
  beforeUnmount() {
    if (!this.$doc) return;
    window.removeEventListener("click", this.domOnClick);
  },
  methods: {
    search() {
      this.getApiDocList();
      this.$emit("search", this.query);
    },
    continueEdit(edit = true) {
      if (edit && this.apiDocDbCache) {
        this.setApiDoc(this.apiDocDbCache);
      }
      this.apiDocDbCache = null;
    },
    addApiDoc(dc) {
      this.$emit("add");
    },
    setApiDoc(doc) {
      this.$emit("set-api-doc", doc);
      this.visibleDocList = false;
    },
    domOnClick(ev) {
      if (ev.path.find((item) => item.className === "cache-list")) {
        return;
      }
      this.visibleDocList = false;
    },
    getApiDocCache() {
      this.$api("doc.getCache").then((result = {}) => {
        console.log("[getApiDocCache]", result);
        // this.apiDocDbCache = result.data;
      });
    },
    getApiDocList() {
      let param = this.query || {};
      this.visibleDocList = true;
      this.$api("doc.getList", param).then((result = {}) => {
        console.log("[getApiDocList]", result);
        this.apiDocList = result.data || [];
      });
    },
  },
};
</script>
<style>
/*  */
.api-cache {
  position: relative;
  z-index: 10;
  margin-right: 10px;
  /* margin-left: 5px; */
}

.doc-name-input {
  flex-grow: 1;
  margin-right: 5px;
}

.doc-name-input input {
  width: 100%;
}

.cache-doc {
  /* position: fixed; */
  position: absolute;
  top: 0;
  left: 0;
  min-width: 200px;
  bottom: auto;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  box-shadow: 2px 4px 25px var(--color-border), 0 0 15px 1px var(--color-border);
  max-width: 360px;
  z-index: 1;
  transform-origin: 5px 5px;
}
.cache-doc-head {
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-back-head);
  white-space: nowrap;
}

.cache-doc-head .search {
  flex-grow: 1;
  margin: 0 10px;
  margin-right: 5px;
  height: 26px;
}
.cache-doc-body {
  padding: 10px;
  white-space: normal;
  word-break: break-all;
}
.cache-doc-footer {
  padding: 5px 10px;
  /* padding-top:0 ; */
  white-space: nowrap;
  border-top: 1px solid var(--color-border);
}
.cache-doc-footer button {
  margin-left: 5px;
  padding: 5px 10px;
}
.title {
  margin: 0 10px;
  /* border: 1px solid #ddd7; */
}
.time {
  margin-right: 20px;
}
.cache-list {
  position: relative;
  /* margin-right: 0px; */
}
.cache-list .search {
  height: 28px;
}
.cache-list-footer {
  border-top: 1px solid var(--color-border);
  text-align: right;
  padding: 7px 15px;
}

.doc-list-view {
  flex-grow: 1;
  position: absolute;
  top: 35px;
  left: 0;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  box-shadow: 2px 4px 25px var(--color-border), 0 0 15px 1px var(--color-border);
  border-radius: 5px;
  max-width: 360px;
  min-width: 100%;
  overflow: auto;
}
.doc-list {
  max-height: 200px;
  overflow: auto;
  padding: 5px 10px;
  margin: 5px 1px;
}
.doc-item {
  margin-bottom: 2px;
  overflow: hidden;
  max-width: 200px;
}
.item-selected {
  color: var(--color-primary);
}
</style>
